<script setup name="ImChat" lang="ts">
//import IMApp from '@/components/IMApp/index.vue';
import {
  ConversationContainer, // 会话列表组件
  ChatContainer, // 聊天（会话消息）组件
  AddContainer, // 搜索——添加按钮组件
  SearchContainer, // 搜索——搜索组件
  ContactListContainer, // 通讯录——通讯录导航组件
  ContactInfoContainer, // 通讯录——通讯录详情组件，包含好友列表、群组列表以及黑名单列表
  MyAvatarContainer // 用户资料组件
} from '@xkit-yx/im-kit-ui';
import '@xkit-yx/im-kit-ui/es/style/css';
import './iconfont.css';
import V2NIM, { V2NIMConst } from 'nim-web-sdk-ng';
import '@xkit-yx/im-kit-ui/es/style/css';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const model = ref('chat');
const search = ref(null);
const add = ref(null);
const avatar = ref(null);
const conversation = ref(null);
const chat = ref(null);
const contactList = ref(null);
const contactInfo = ref(null);
const uikitInit = ref(false);
const initOptions = {
  appKey: '6a467c7b1222a4399af74a6313e86d78',
  account: 'lphwgecf44pm',
  token: '254ad74b954ab4d12e7d5830c352fc92'
};
const localOptions = {
  // 添加好友模式，默认需要验证
  addFriendNeedVerify: false
};
const nim = V2NIM.getInstance({
    appkey: '6a467c7b1222a4399af74a6313e86d78',
    account: 'lphwgecf44pm',
    token: '254ad74b954ab4d12e7d5830c352fc92',
    debugLevel: 'debug',
    apiVersion: 'v2'
  });


const nimLogin = async () => {
  try {

    await nim.V2NIMLoginService.login(initOptions.account, initOptions.token,{ retryCount: 5 });
    const loginStatus = nim.V2NIMLoginService.getLoginStatus();
    console.log("登录状态:", loginStatus);
    try {
      const message = nim.V2NIMMessageCreator.createTextMessage('hello world');
      const conversationId = nim.V2NIMConversationIdUtil.p2pConversationId('qy--5qhq0cdo');
      const res = await nim.V2NIMMessageService.sendMessage(message, conversationId);
      console.log("发送IM消息：",res);
      console.log("成功创建一条消息",message);
    } catch(err) {
      // todo error
    }
  } catch (err) {
    console.log('NIM登录发生错误,', err);
  }
};
const initChat = () => {
  console.log("**NIM**", nim);
  nimLogin();
  //初始化UIKit实例
  const _uikit = proxy.initUIKit(nim, localOptions);
  console.log("当前uikit:", _uikit);
    proxy.$uikit = _uikit;
    uikitInit.value = true;
  //search
  _uikit.render(
    SearchContainer,
    {
      onClickChat: () => {
        model.value = 'chat';
      }
    },
    search.value
  );
  //add
  _uikit.render(
    AddContainer,
    {
      onClickChat: () => {
        model.value = 'chat';
      }
    },
    add.value
  );
  //avatar
  _uikit.render(MyAvatarContainer, null, avatar.value);
  //conversation
  _uikit.render(ConversationContainer, null, conversation.value);
  //chat
  _uikit.render(
    ChatContainer,
    {
      onClickChat: () => {
        model.value = 'chat';
      }
    },
    chat.value
  );
  _uikit.render(ContactListContainer, null, contactList.value);
  _uikit.render(
    ContactInfoContainer,
    {
      afterSendMsgClick: () => {
        model.value = 'chat';
      },
      onGroupItemClick: () => {
        model.value = 'chat';
      }
    },
    contactInfo.value
  );
  const { store } = _uikit.getStateContext();
};

const sendMsg = async (msg: string) => {
  // const res1 = await nim.V2NIMFriendService.addFriend('qy--5qhq0cdo', {
  //   addMode: 2,
  //   postscript: '你好，我是xxx'
  // });
 // console.log('[addFriend]', res1);
 const conversationId = nim.V2NIMConversationIdUtil.p2pConversationId('qy--5qhq0cdo');
 // const message = nim.V2NIMMessageCreator.createTextMessage('hello');
  // 发送消息
 // const res = await nim.V2NIMMessageService.sendMessage(message, conversationId);
 // console.log('发送消息结果', res);
  //const res = nim.friend.addFriend({ account: 'qy--5qhq0cdo' });
  const message = nim.V2NIMMessageCreator.createTextMessage('hello world');
  //try {
    const res = await nim.V2NIMMessageService.sendMessage(message, conversationId);
    console.log("发送IM消息：",res);
  //}catch (e){
  //  console.log("发送消息异常",e);
  //}

  // const message = await nim.msg.sendTextMsg({
  //   scene:'p2p',
  //   to:'qy--5qhq0cdo',
  //   body:'Hello'
  // });


};

onMounted(() => {
  initChat();
 // sendMsg('');
});
onBeforeUnmount(() => {
  // UIKit.uikit.unmount(this.$refs.conversation as HTMLElement);
  // UIKit.uikit.unmount(this.$refs.chat as HTMLElement);
});
</script>

<template>
  <div>
    <div :class="$style.container">
      <!-- IMUIKIT 相关内容 -->
      <div :class="$style.header">
        <div :class="$style.search" ref="search" />
        <div :class="$style.add" ref="add" />
      </div>
      <div :class="$style.content">
        <div :class="$style.left">
          <div :class="$style['avatar-icon']" ref="avatar" />
          <div :class="{ [$style['chat-icon']]: true, [$style.active]: model === 'chat' }"
               @click="() => model = 'chat'">
            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-message_fill_light': true }" />
            <div :class="$style['icon-label']">会话</div>
          </div>
          <div :class="{ [$style['contact-icon']]: true, [$style.active]: model === 'contact' }"
               @click="() => model = 'contact'">
            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-tongxunlu1': true }" />
            <div :class="$style['icon-label']">通讯录</div>
          </div>
<!--          <div :class="$style['logout-icon']">-->
<!--            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-logout': true }" />-->
<!--            <div :class="$style['icon-label']">退出</div>-->
<!--          </div>-->
        </div>
        <div :class="$style.right" v-show="model === 'chat'">
          <div :class="$style['right-list']" ref="conversation" />
          <div :class="$style['right-content']" ref="chat" />
        </div>
        <div :class="$style.right" v-show="model === 'contact'">
          <div :class="$style['right-list']" ref="contactList" />
          <div :class="$style['right-content']" ref="contactInfo" />
        </div>
      </div>
    </div>
  </div>
</template>

<style module>

.container {
  width: 1070px;
  height: 670px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e8e8e8;
}

.search {
  width: 50%;
}

.add {
  margin-left: 20px;
}

.content {
  width: 100%;
  height: 610px;
  display: flex;
}

.left {
  width: 60px;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.avatar-icon {
  margin: 20px 0 25px 0;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
}

.iconfont {
  font-size: 24px;
}

.chat-icon,
.contact-icon {
  margin: 0 0 25px 0;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.6);
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.active {
  color: #2a6bf2;
}

.logout-icon {
  position: absolute;
  bottom: 10px;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.icon-label {
  font-size: 12px;
  text-align: center;
}

.right {
  flex: 1;
  display: flex;
}

.right-list {
  width: 200px;
  border-right: 1px solid #e8e8e8;
}

.right-content {
  flex: 1;
}
</style>
